<!DOCTYPE html>
<html>
<head>
    

    
<!-- Tencent Speed -->
<script>var _speedMark = new Date()</script>
<!-- End Tencent Speed -->
<!-- Tencent Analysis -->
<script async src="//tajs.qq.com/stats?sId=61422473"></script>
<!-- End Tencent Analysis -->


    



    <meta charset="utf-8">
    
    
    
    <title>jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查 | z77z的小码窝 | 年少无为，卖码为生。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#ffff00">
    
    
    <meta name="keywords" content="jqGrid,mybatisPlus">
    <meta name="description" content="z77z后台管理系统
            
框架介绍
jqGrid ：是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。支持json和xml数据和服务器交互，有很多自定义的功能，具体可">
<meta property="og:type" content="article">
<meta property="og:title" content="jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查">
<meta property="og:url" content="http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/index.html">
<meta property="og:site_name" content="z77z的小码窝">
<meta property="og:description" content="z77z后台管理系统
            
框架介绍
jqGrid ：是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。支持json和xml数据和服务器交互，有很多自定义的功能，具体可">
<meta property="og:image" content="http://img.blog.csdn.net/20170320133156343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA5NTQ5NTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
<meta property="og:image" content="http://img.blog.csdn.net/20170320123539093?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA5NTQ5NTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
<meta property="og:updated_time" content="2017-03-21T13:54:16.341Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查">
<meta name="twitter:description" content="z77z后台管理系统
            
框架介绍
jqGrid ：是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。支持json和xml数据和服务器交互，有很多自定义的功能，具体可">
<meta name="twitter:image" content="http://img.blog.csdn.net/20170320133156343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA5NTQ5NTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
    
        <link rel="alternate" type="application/atom+xml" title="z77z的小码窝" href="/atom.xml">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">邹海清</h5>
          <a href="mailto:1093615728@qq.com" title="1093615728@qq.com" class="mail">1093615728@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://git.oschina.net/z77z" target="_blank" >
                <i class="icon icon-lg icon-git"></i>
                git
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="http://t.qq.com/zouhaiqing123" target="_blank" >
                <i class="icon icon-lg icon-weibo"></i>
                微博
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/custom"  >
                <i class="icon icon-lg icon-link"></i>
                404页面测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查</h1>
        <h5 class="subtitle">
            
                <time datetime="2017-03-20T11:14:11.000Z" itemprop="datePublished" class="page-time">
  2017-03-20
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#框架介绍"><span class="post-toc-number">1.</span> <span class="post-toc-text">框架介绍</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#分页查询"><span class="post-toc-number">2.</span> <span class="post-toc-text">分页查询</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#排序"><span class="post-toc-number">3.</span> <span class="post-toc-text">排序</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#增删改查"><span class="post-toc-number">4.</span> <span class="post-toc-text">增删改查</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#使用jqGrid-mybatisPlus开发的好处"><span class="post-toc-number">5.</span> <span class="post-toc-text">使用jqGrid+mybatisPlus开发的好处</span></a></li></ol>
        </nav>
    </aside>
    
<article id="post-jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查</h1>
        <div class="post-meta">
            <time class="post-time" title="2017-03-20 19:14:11" datetime="2017-03-20T11:14:11.000Z"  itemprop="datePublished">2017-03-20</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://img.blog.csdn.net/20170320133156343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA5NTQ5NTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="z77z后台管理系统" title="">
                </div>
                <div class="image-caption">z77z后台管理系统</div>
            </figure>
<h2 id="框架介绍"><a href="#框架介绍" class="headerlink" title="框架介绍"></a>框架介绍</h2><hr>
<p>jqGrid ：是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。支持json和xml数据和服务器交互，有很多自定义的功能，具体可以去看文档：<a href="http://blog.mn886.net/jqGrid/" target="_blank" rel="external">http://blog.mn886.net/jqGrid/</a> 。</p>
<p>MybatisPlus：这个框架是国内的大神编写的，我个人认为这就是一个mybatis的一个增强工具包，好处请大家自行去官方文档查阅，这里就不再赘述了。文档链接：<a href="http://mp.baomidou.com/docs/index.html" target="_blank" rel="external">http://mp.baomidou.com/docs/index.html</a> 。</p>
<p>如果之前没有用过的同学也可以看我的项目来学到这两个框架的实际用法。</p>
<p>·······················································································································································</p>
<p>个人博客：<a href="http://z77z.oschina.io/">http://z77z.oschina.io/</a></p>
<p>此项目下载地址：<a href="https://git.oschina.net/z77z/springboot_mybatisplus" target="_blank" rel="external">https://git.oschina.net/z77z/springboot_mybatisplus</a></p>
<p>·······················································································································································</p>
<p>我是在之前项目上来进行开发的，所以已经完成了mybatisPlus的搭建，具体mybatisPlus的配置可以去看我之前美女图片爬虫的那篇博文。</p>
<h2 id="分页查询"><a href="#分页查询" class="headerlink" title="分页查询"></a>分页查询</h2><hr>
<p>下面我就以角色表的分页排序为例：</p>
<p>由于数据层mybatisPlus已经对分页进行了封装，直接在controller层调用分页方法：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//获取角色分页对象</span></div><div class="line"><span class="meta">@RequestMapping</span>(value=<span class="string">"getRoleListWithPager"</span>)</div><div class="line"><span class="meta">@ResponseBody</span></div><div class="line"><span class="function"><span class="keyword">public</span> String <span class="title">getRoleListWithPager</span><span class="params">(FrontPage&lt;SysRole&gt; page)</span> </span>&#123;</div><div class="line">	<span class="comment">//获取page对象 </span></div><div class="line">	Page&lt;SysRole&gt; pageList = sysRoleService.selectPage(page.getPagePlus());</div><div class="line">	CustomPage&lt;SysRole&gt; customPage = <span class="keyword">new</span> CustomPage&lt;SysRole&gt;(pageList);</div><div class="line">	<span class="keyword">return</span> JSON.toJSONString(customPage);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>FrontPage对象是用来接受前台jqGrid传来的对象。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> io.z77z.entity;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.baomidou.mybatisplus.plugins.Page;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * 用来接收页面传过来的查询字段   对象</div><div class="line"> * <span class="doctag">@author</span> z77z</div><div class="line"> * </div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">FrontPage</span>&lt;<span class="title">T</span>&gt; </span>&#123;</div><div class="line">	<span class="comment">//是否是查询</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">boolean</span> _search;</div><div class="line">	</div><div class="line">	<span class="comment">//时间戳（毫秒）</span></div><div class="line">	<span class="keyword">private</span> String nd;</div><div class="line">	</div><div class="line">	<span class="comment">//每页显示条数</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> rows;</div><div class="line">	</div><div class="line">	<span class="comment">//当前页数</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> page;</div><div class="line">	</div><div class="line">	<span class="comment">//排序的字段</span></div><div class="line">	<span class="keyword">private</span> String sidx;</div><div class="line">	</div><div class="line">	<span class="comment">//排序方式 asc升序  desc降序</span></div><div class="line">	<span class="keyword">private</span> String sord;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">is_search</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> _search;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">set_search</span><span class="params">(<span class="keyword">boolean</span> _search)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>._search = _search;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getNd</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> nd;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setNd</span><span class="params">(String nd)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.nd = nd;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getRows</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> rows;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setRows</span><span class="params">(<span class="keyword">int</span> rows)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.rows = rows;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getPage</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> page;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setPage</span><span class="params">(<span class="keyword">int</span> page)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.page = page;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getSidx</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> sidx;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setSidx</span><span class="params">(String sidx)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.sidx = sidx;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getSord</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> sord;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setSord</span><span class="params">(String sord)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.sord = sord;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="comment">//获取mybatisPlus封装的Page对象</span></div><div class="line">	<span class="function"><span class="keyword">public</span> Page&lt;T&gt; <span class="title">getPagePlus</span><span class="params">()</span></span>&#123;</div><div class="line">		Page&lt;T&gt; pagePlus = <span class="keyword">new</span> Page&lt;T&gt;();</div><div class="line">		pagePlus.setCurrent(<span class="keyword">this</span>.page);</div><div class="line">		pagePlus.setSize(<span class="keyword">this</span>.rows);</div><div class="line">		pagePlus.setAsc(<span class="keyword">this</span>.sord.equals(<span class="string">"asc"</span>));</div><div class="line">		pagePlus.setOrderByField(<span class="keyword">this</span>.sidx);</div><div class="line">		<span class="keyword">return</span> pagePlus;</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>CustomPage对象是我封装的，由于jqGrid和MybatisPlus中的怕个对象字段名称不一样，所以用此对象来过度，就是传入mybatisPlus的page对象，转换成jqGrid的怕个对象，再封装成json对象传到前台。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> io.z77z.entity;</div><div class="line"></div><div class="line"><span class="keyword">import</span> java.util.List;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.baomidou.mybatisplus.plugins.Page;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * </div><div class="line"> * 由此对象将page对象转换成json对象，传到前台处理</div><div class="line"> * <span class="doctag">@author</span> z77z</div><div class="line"> * 由于jqgrid框架定义的page对象里面的字段和mybatisplus的不一样</div><div class="line"> * 所以这个由这个中间对象来转换</div><div class="line"> * <span class="doctag">@param</span> &lt;T&gt;</div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CustomPage</span>&lt;<span class="title">T</span>&gt;</span>&#123;</div><div class="line">	</div><div class="line">	<span class="comment">//当前页数</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> page;</div><div class="line">	</div><div class="line">	<span class="comment">//每页显示数量</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> pagesize;</div><div class="line">	</div><div class="line">	<span class="comment">//总条数</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> records;</div><div class="line">	</div><div class="line">	<span class="comment">//数据列表</span></div><div class="line">	<span class="keyword">private</span> List&lt;T&gt; rows;</div><div class="line">	</div><div class="line">	<span class="comment">//总页数</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> total;</div><div class="line">	</div><div class="line">	<span class="comment">//排序字段</span></div><div class="line">	<span class="keyword">private</span> String orderByField;</div><div class="line">	</div><div class="line">	<span class="comment">//是否升序</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">boolean</span> isAsc;</div><div class="line"> 	</div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getPage</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> page;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setPage</span><span class="params">(<span class="keyword">int</span> page)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.page = page;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getPagesize</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> pagesize;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setPagesize</span><span class="params">(<span class="keyword">int</span> pagesize)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.pagesize = pagesize;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getRecords</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> records;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setRecords</span><span class="params">(<span class="keyword">int</span> records)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.records = records;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> List&lt;T&gt; <span class="title">getRows</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> rows;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setRows</span><span class="params">(List&lt;T&gt; rows)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.rows = rows;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getTotal</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> total;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTotal</span><span class="params">(<span class="keyword">int</span> total)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.total = total;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getOrderByField</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> orderByField;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setOrderByField</span><span class="params">(String orderByField)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.orderByField = orderByField;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">isAsc</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> isAsc;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setAsc</span><span class="params">(<span class="keyword">boolean</span> isAsc)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.isAsc = isAsc;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="title">CustomPage</span><span class="params">()</span></span>&#123;&#125;</div><div class="line">	</div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="title">CustomPage</span><span class="params">(Page&lt;T&gt; page)</span></span>&#123;</div><div class="line">		<span class="keyword">this</span>.page = page.getCurrent();</div><div class="line">		<span class="keyword">this</span>.pagesize = page.getSize();</div><div class="line">		<span class="keyword">this</span>.records = page.getTotal();</div><div class="line">		<span class="keyword">this</span>.rows = page.getRecords();</div><div class="line">		<span class="keyword">this</span>.total = page.getPages();</div><div class="line">		<span class="keyword">this</span>.orderByField = page.getOrderByField();</div><div class="line">		<span class="keyword">this</span>.isAsc = page.isAsc();</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个controller测试链接：<a href="http://127.0.0.1:8080/role/getRoleListWithPager?_search=false&amp;nd=1489983253884&amp;rows=15&amp;page=1&amp;sidx=&amp;sord=asc" target="_blank" rel="external">http://127.0.0.1:8080/role/getRoleListWithPager?_search=false&amp;nd=1489983253884&amp;rows=15&amp;page=1&amp;sidx=&amp;sord=asc</a></p>
<p>后面的参数含义，对照FrontPage.java的字段。</p>
<p>访问这个controller得到下面的json串：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">    &quot;asc&quot;: true,</div><div class="line">    &quot;page&quot;: 1,</div><div class="line">    &quot;pagesize&quot;: 15,</div><div class="line">    &quot;records&quot;: 3,</div><div class="line">    &quot;rows&quot;: [</div><div class="line">        &#123;</div><div class="line">            &quot;id&quot;: &quot;1&quot;,</div><div class="line">            &quot;name&quot;: &quot;系统管理员&quot;,</div><div class="line">            &quot;type&quot;: &quot;888888&quot;</div><div class="line">        &#125;,</div><div class="line">        &#123;</div><div class="line">            &quot;id&quot;: &quot;3&quot;,</div><div class="line">            &quot;name&quot;: &quot;权限角色&quot;,</div><div class="line">            &quot;type&quot;: &quot;100003&quot;</div><div class="line">        &#125;,</div><div class="line">        &#123;</div><div class="line">            &quot;id&quot;: &quot;4&quot;,</div><div class="line">            &quot;name&quot;: &quot;用户中心&quot;,</div><div class="line">            &quot;type&quot;: &quot;100002&quot;</div><div class="line">        &#125;</div><div class="line">    ],</div><div class="line">    &quot;total&quot;: 1</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>对应字段意思，对照CustomPage.java中的字段。</p>
<p>前台加载表单的js代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">$(document).ready(function() &#123;</div><div class="line">	var config = &#123;</div><div class="line">		title : &apos;角色列表&apos;,</div><div class="line">		url : &apos;/role/getRoleListWithPager&apos;,</div><div class="line">		colNames : [ &apos;主键&apos;, &apos;角色名称&apos;, &apos;角色编号&apos; ],</div><div class="line">		colModel : [ &#123;</div><div class="line">			name : &apos;id&apos;,</div><div class="line">			index : &apos;id&apos;,</div><div class="line">			width : 60,</div><div class="line">			key : true,</div><div class="line">			hidden : true</div><div class="line">		&#125;, &#123;</div><div class="line">			name : &apos;name&apos;,</div><div class="line">			index : &apos;name&apos;,</div><div class="line">			width : 60</div><div class="line">		&#125;, &#123;</div><div class="line">			name : &apos;type&apos;,</div><div class="line">			index : &apos;type&apos;,</div><div class="line">			width : 100</div><div class="line">		&#125; ]</div><div class="line">	&#125;;</div><div class="line">	JucheapGrid.Load(config);</div><div class="line">	$(&quot;#btnSearch&quot;).bind(&quot;click&quot;, searchData);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>显示效果</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://img.blog.csdn.net/20170320123539093?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA5NTQ5NTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="jqgrid表单" title="">
                </div>
                <div class="image-caption">jqgrid表单</div>
            </figure>
<p>这个分页查询是mybatisPlus已经写好了，只是针对单表查询，如果是自定义多表查询的话，就需要自己写查询sql语句，自己写mapper.xml文件，自己写mapper接口，自己写service，那怎么使用page类分页呐？</p>
<p>只要在查询的mapper.xml中传入page对象，mybatisPlus就会根据传入的page对象拦截生成对应的查询sql语句。所以如果是多表查询也可以自己实现service  ,mappe接口，mapper.xml等来实现多表查询的分页排序等。</p>
<h2 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h2><hr>
<p>实际上面分页的实现后，排序也跟着实现了，再点击表头的某个字段时，jqgrid会发送ajax请求访问分页链接：<a href="http://localhost:8080/role/getRoleListWithPager?_search=false&amp;nd=1489984862781&amp;rows=15&amp;page=1&amp;sidx=name&amp;sord=asc" target="_blank" rel="external">http://localhost:8080/role/getRoleListWithPager?_search=false&amp;nd=1489984862781&amp;rows=15&amp;page=1&amp;sidx=name&amp;sord=asc</a> 。mybatisPlus会根据传入的page对象拦截sql的生成。达到分页排序的效果。</p>
<p>没传sidx字段的时候：拦截器生成的sql为：SELECT id,<code>name</code>,<code>type</code> FROM sys_role LIMIT 0,15 </p>
<p>传入sidx字段为name的时候：拦截器生成的sql为：SELECT id,<code>name</code>,<code>type</code> FROM sys_role ORDER BY name ASC LIMIT 0,15 </p>
<p>这些都是mybatisPlus给我们封装好了的，建议去了解下源码。</p>
<h2 id="增删改查"><a href="#增删改查" class="headerlink" title="增删改查"></a>增删改查</h2><hr>
<p>这个代码实现就比较简单了，可以直接去我码云上面去查看源码。</p>
<h2 id="使用jqGrid-mybatisPlus开发的好处"><a href="#使用jqGrid-mybatisPlus开发的好处" class="headerlink" title="使用jqGrid+mybatisPlus开发的好处"></a>使用jqGrid+mybatisPlus开发的好处</h2><hr>
<ol>
<li>前端不需要使用foreach标签来循环显示列表。</li>
<li>查询，分页，排序使用同一个url，根据访问参数来控制数据的获取。</li>
<li>jqGrid的page和mybatisPlus的page实现思路一样，通过page对象的封装来实现分页。后台不需要再对page进行封装。</li>
<li>mybatisPlus实现了单表的常用查询。</li>
<li>前端点击表头进行表单排序，jqGrid已有相应实现。</li>
<li>模式化开发，这一套开发对增删改查分页排序管理通用。达到敏捷开发的效果。</li>
</ol>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2017-03-21T13:54:16.341Z" itemprop="dateUpdated">2017-03-21 21:54:16</time>
</span><br>


        
    </div>
    <footer>
        <a href="http://z77z.oschina.io">
            <img src="/img/avatar.jpg" alt="邹海清">
            邹海清
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jqGrid/">jqGrid</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mybatisPlus/">mybatisPlus</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&title=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&pic=http://z77z.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&title=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&via=http://z77z.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2017/03/27/Shiro中Session和Cookie的一些思考/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">Shiro中Session和Cookie的一些思考</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2017/03/13/SpringBoot+Shiro学习之密码加密和登录失败次数限制/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">SpringBoot+Shiro学习之密码加密和登录失败次数限制</h4>
      </a>
    </div>
  
</nav>



    










    <div id="cloud-tie-wrapper" class="comments cloud-tie-wrapper"></div>
    <script>
    var cloudTieConfig = {
        url: 'http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/index.html',
        sourceId: 'jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查',
        productKey: '64500aaa7f0a4f6f804c4df9b5880011',
        target: 'cloud-tie-wrapper',
        pcFiles: [
            '/css/cloudTie/pc.css?v=1.4.3',
            '/js/cloudTie/pc.min.js?v=1.4.3',
        ],
        mobileFiles: [
            '/css/cloudTie/mobile.css?v=1.4.3',
            '/js/cloudTie/mobile.min.js?v=1.4.3'
        ]
    };
    </script>
    <script src="/js/cloudTie/loader.min.js?v=1.4.3"></script>







</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        我只要一角钱~ ~
        <i class="icon icon-quote-right"></i>
    </h3>
    <ul class="reward-items">
        
        <li>
            <img src="/img/wechat.png" title="微信打赏二维码" alt="微信打赏二维码">
            <p>微信</p>
        </li>
        

        
        <li>
            <img src="/img/alipay.jpg" title="支付宝打赏二维码" alt="支付宝打赏二维码">
            <p>支付宝</p>
        </li>
        
    </ul>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a></span>
            <span>邹海清 &copy; 2016 - 2017</span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&title=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&pic=http://z77z.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&title=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查》 — z77z的小码窝&url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/&via=http://z77z.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://z77z.oschina.io/2017/03/20/jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };



lazyScripts.push('//s95.cnzz.com/z_stat.php?id=1261081671&web_id=1261081671')

</script>

<script src="/js/main.min.js?v=1.4.3"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="/js/search.min.js?v=1.4.3" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
